<template>
  <div class="user">
    <el-form ref="form" :model="form" label-width="80px">
      <div class="top">
        <img :src="img" alt />
        <div>
          <el-form-item label="*输入账号:">
            <el-input class="width" v-model="form.name1"></el-input>
          </el-form-item>
          <el-form-item label="*输入密码:">
            <el-input class="width" v-model="form.name2"></el-input>
          </el-form-item>
          <el-form-item label="*真实姓名:">
            <el-input class="width" v-model="form.name3"></el-input>
          </el-form-item>
        </div>
      </div>
      <div class="bottom">
        <div class="bottom1">
          <el-form-item label="所在部门:">
            <el-select class="wid" @change="system" v-model="form.region1" placeholder="请选择机构">
              <el-option :label="item.sys" v-for="(item,index) in sector" :value="item.sys" :key="index">{{item.sys}}</el-option>
              <!-- <el-option label="教职工" value="beijing"></el-option> -->
            </el-select>
            <el-select class="wid" v-model="form.region2" placeholder="请选择部门">
              <el-option v-for="(item,index) in sec" :label="item.sector" :value="item.sector" :key="index"></el-option>
              <!-- <el-option label="教职工" value="beijing"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="*性别选择:">
            <el-radio-group v-model="form.resource1">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="*职称:">
            <el-select v-model="form.region3" placeholder="职称">
              <el-option label="初级教师" value="shanghai"></el-option>
              <el-option label="高级教师" value="beijing"></el-option>
              <el-option label="金牌教师" value="jinpai"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="*角色:">
            <el-select v-model="form.region4" placeholder="角色">
              <el-option label="普通会员" value="shanghai"></el-option>
              <el-option label="高级会员" value="beijing"></el-option>
              <el-option label="金牌会员" value="jinpai"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="*状态:">
            <el-radio-group v-model="form.resource2">
              <el-radio label="正常"></el-radio>
              <el-radio label="冻结"></el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div>
          <el-input
            type="textarea"
            :rows="10"
            class="bottom-width"
            placeholder="惩奖简介"
            v-model="form.textarea"
          ></el-input>
          <el-button class="btn" type="primary" round>确认添加</el-button>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        name1: "",
        name2: "",
        name3: "",
        region1: "",
        region2: "",
        region3: "",
        region4: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        textarea: "",
        resource1: "男",
        resource2: "正常",
      },
      sector: [
        {
          sys: "学生组织",
          sector: [
            {
              sector: "学生会",
            },
            {
              sector: "舞蹈部",
            },
            {
              sector: "银河团",
            },
            {
              sector: "音乐村",
            },
          ],
        },
        {
          sys:"教务处",
          sector: [
            {
              sector: "教材科",
            },
            {
              sector: "档案办公室",
            },
            {
              sector: "教学设备办公室",
            },
            {
              sector: "教学管理督察办公室",
            },
          ],
        },
        {
          sys:"总务处",
          sector: [
            {
              sector: "宿舍管理办公室",
            },
            {
              sector: "膳食科",
            },
            {
              sector: "维修科",
            },
          ],
        },
        {
          sys:"公安处",
          sector: [
            {
              sector: "校区保卫科A",
            },
            {
              sector: "校区保卫科B",
            },
            {
              sector: "校区保卫科C",
            },
            {
              sector: "校区保卫科D",
            },
          ],
        }
      ],
      sec:'',
      img:require('./assets/logo.png')
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    system(e){
      let that = this
        for(let i = 0;i<that.sector.length;i++){
          if(that.sector[i].sys ==e){
              that.sec = that.sector[i].sector
              that.form.region2 = that.sector[i].sector[0].sector
          }
        }
    }
  },
};
</script>
<style scoped lang="less">
.wid {
  width: 120px;
}
.wid:nth-of-type(1) {
  margin-right: 20px;
}
.btn {
  display: block;
  margin: 0px auto;
  margin-top: 5%;
}
.bottom-width {
  width: 400px;
}
.bottom {
  display: flex;
  justify-content: space-between;
}
.width {
  width: 400px;
}
.user {
  width: 800px;
  margin: 5% auto;
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10%;
  margin-top: 5%;
  & img {
    width: 200px;
    height: 200px;
    border: 1px solid silver;
    border-radius: 50%;
    margin-right: 10%;
  }
}
</style>